<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>
    <div @click="changeText">text: {{text}}</div>
    <hr>
    <div @click="changeDog">dog.name: {{dog.name}}</div>
    <div>dog.age: {{ dog.age }}</div>
    

    
    


  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {
    // ref包裹基本数据类型 - 监听

    const text = ref('我爱你')
    const changeText = () => {
      text.value += '燕子'
    }

    watch(text, (nval, oval) => {
      console.log(nval);  
    })
    // ref包裹引用数据类型 - 监听
    
    const dog = ref({
      name: '旺财',
      age: 2
    })
    const changeDog = () => {
      // dog.value = reactive({
      //   name: '来福',
      //   age: 3
      // })

      // 修改得是ref对象下value存得proxy对象得属性 - 监听不到
      
      dog.value.name = '肠胃'
      dog.value.age = 4
    }
    watch(dog, (nval,oval) => {
      console.log(nval);
    })
    // 结论1: 监听的是 ref 对象的.value属性的改变(在没有开启深度监听)
    
    // 参数一放的是 proxy对象, 当proxy对象下的属性发生变化的时候可以监听到

    watch(dog.value,(nval,oval) => {
      console.log('dog.value ->', nval);
    })

    // watch(dog.value.name,(nval) => {
    //   console.log('nval');
    // })
    // watch('来福',(nval) => {
    //   console.log('nval');
    // })


    //若想要监听字符串，  ==》写成函数形式
    watch( () => dog.value.name, (nval,oval) => {
      console.log('直接监听字符串', nval);
    })




    return {
      text,
      changeText,
      dog,
      changeDog
    }
    
    }

   
  
}
</script>

<style scoped >

</style>